<template>
  <div class="search">
    <Card>
      <Form ref="searchForm" :label-width="70" :model="queryParams" class="search-form" inline>
        <Form-item label="域名" prop="hostName">
          <Input
            v-model="queryParams.params.hostName"
            clearable
            placeholder="請輸入域名"
            style="width: 200px"
            type="text"
          />
        </Form-item>
        <Button class="search-btn" icon="ios-search" type="primary" @click="handleSearch">搜索</Button>
      </Form>
      <Row class="operation padding-row">
        <Button type="primary" @click="add">添加</Button>
      </Row>
      <Table ref="table" :columns="columns" :data="data" :loading="loading" border></Table>
      <Modal
        v-model="modalVisible"
        :closable="false"
        :mask-closable="false"
        :title="modalTitle"
        :width="500"
      >
        <Form ref="form" :label-width="100" :model="formAdd">
          <Form-item label="域名" prop="goodsName">
            <Input
              v-model="formAdd.hostName"
              clearable
              placeholder="域名"
              style="width: 200px"
              type="text"
            />
          </Form-item>
          <Form-item label="店铺ID" prop="storeId">
            <Input
              v-model="formAdd.storeId"
              clearable
              placeholder="店铺ID"
              style="width: 200px"
              type="text"
            />
          </Form-item>
        </Form>
        <div slot="footer">
          <Button type="text" @click="cancel">取消</Button>
          <Button v-if="modalTitle==='添加域名店铺'" type="primary" @click="addData">提交</Button>
          <Button v-if="modalTitle!=='添加域名店铺'" type="primary" @click="editData">修改</Button>
        </div>
      </Modal>
      <Row class="mt_10" justify="end" type="flex">
        <Page :current="queryParams.pageNum" :page-size="queryParams.pageSize" :page-size-opts="[10, 20, 50]"
              :total="total"
              show-elevator show-sizer
              show-total size="small" @on-change="changePage" @on-page-size-change="changePageSize"></Page>
      </Row>
    </Card>
  </div>
</template>

<script>
import {addHostStore, editHostStore, getHostStoreList, removeHostStore} from "@/api/hostStore";

export default {
  name: "host-list",
  data() {
    return {
      loading: true, // 表單加载狀態
      queryParams: {
        pageNum: 1,
        pageSize: 10, // 頁面大小
        sortName: 'id',
        sortOrder: 'desc',
        modalVisible: false,
        params: {
          hostName: ""
        }
      },
      formAdd: {
        hostName: "",
        storeId: ""
      },
      selectDate: null, // 创建時間
      modalVisible: false, // 添加或编辑显示
      modalTitle: "", // 添加或编辑標題
      columns: [
        // 表頭
        {
          title: "域名",
          key: "hostName",
          minWidth: 120,
          align: "left",
        },
        {
          title: "店铺ID",
          key: "storeId",
          minWidth: 130,
          tooltip: true
        },
        {
          title: "店铺名稱",
          key: "storeName",
          minWidth: 130,
          tooltip: true
        },
        {
          title: "操作",
          key: "action",
          width: 200,
          align: "center",
          fixed: "right",
          render: (h, params) => {
            let enableOrDisable = "";
            return h("div", [
              h(
                "Button",
                {
                  props: {
                    type: "info",
                    size: "small"
                  },
                  style: {
                    marginRight: "5px"
                  },
                  on: {
                    click: () => {
                      this.edit(params.row);
                    }
                  }
                },
                "编辑"
              ),
              enableOrDisable,
              h(
                "Button",
                {
                  props: {
                    type: "error",
                    size: "small"
                  },
                  on: {
                    click: () => {
                      this.remove(params.row);
                    }
                  }
                },
                "删除"
              )
            ]);
          }
        }
      ],
      data: [], // 表單數据
      total: 0, // 表單數据总數
      selectedShop: false, //用於是否選擇店铺
    };
  },
  methods: {
    // 回调给父级
    callback(val) {
      this.$emit("callback", val);
    },
    // 初始化數据
    init() {
      this.getDataList();
    },
    // 分頁 改变頁碼
    changePage(v) {
      this.queryParams.pageNum = v;
      this.getDataList();
    },
    // 分頁 改变頁數
    changePageSize(v) {
      this.queryParams.pageNum = 1;
      this.queryParams.pageSize = v;
      this.getDataList();
    },
    // 搜索
    handleSearch() {
      this.queryParams.pageNum = 1;
      this.queryParams.pageSize = 10;
      this.getDataList();
    },
    // 获取列表數据
    getDataList() {
      console.log(this.queryParams)
      this.loading = true;
      // 带多條件搜索參數获取表單數据 請自行修改接口
      getHostStoreList(this.queryParams).then((res) => {
        this.loading = false;
        if (res.success) {
          this.data = res.result.records;
          this.total = res.result.total;
        }
      });
      this.total = this.data.length;
      this.loading = false;
    },
    resetForm() {
      this.formAdd.hostName = "";
      this.formAdd.storeId = "";
    },
    // 添加店铺
    add(v) {
      this.modalTitle = "添加域名店铺";
      this.modalVisible = true;
    },
    // 修改店铺
    edit(v) {
      this.modalTitle = "修改域名店铺";
      this.modalVisible = true;
      this.formAdd = v;
    },
    remove(v) {
      removeHostStore(v).then(res => {
        this.$Message.success('删除成功');
        this.getDataList();
      }).catch(err => {
        this.$Message.error('删除失败');
      })
      this.resetForm();
    },
    addData() {
      addHostStore(this.formAdd).then(res => {
        console.log("成功")
        this.getDataList();
        this.modalVisible = false;
      });
      this.resetForm();
    },
    editData() {
      editHostStore(this.formAdd).then(res => {
        console.log("成功")
        this.getDataList();
        this.modalVisible = false;
      })
      this.resetForm();
    },
    cancel() {
      this.modalVisible = false;
      this.resetForm();
      this.getDataList();
    }
  },
  mounted() {
    this.init();
  },
};
</script>
